<h2>英雄列表</h2>

<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
        <span class="hero-element">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
        </span>
        <button class="delete-button" (click)="deleteHero(hero, $event)">删除</button>
    </li>
</ul>

<div class="error" *ngIf="error">{{error}}</div>
<button (click)="addHero()">添加英雄</button>
<div *ngIf="addingHero">
    <!--事件属性(aaaaa)要和子组件hero-detail-component中的EventEmitter对应起来-->
    <hero-detail-component (aaaaa)="close($event)"></hero-detail-component>
</div>

<div *ngIf="selectedHero">
    <h2>
        [{{selectedHero.name | uppercase}}] 被选中
    </h2>
    <button (click)="gotoDetail()">查看详情</button>
</div>

<div>
    <style>
        .hidden {
            visibility: hidden
        }
        table{
            border: 1px solid blueviolet;
            border-collapse: collapse;
        }
        td{
            border: 1px solid blueviolet;
            height: 25px;
            padding: 10px;
        }
    </style>
    <h4>ngFor 指令特征</h4>
    <button (click)="showNgFor=!showNgFor">{{showNgFor ? '隐藏' : '显示'}} ngFor 指令特征</button>
    <table [class.hidden]="!showNgFor">
        <tbody>
            <tr *ngFor="let hero of heroes; let ix = index; let c = count; let e = even; let o = odd; let f = first; let l = last">
                <td>{{hero.name}}</td>
                <td>{{ix}}</td>
                <td>{{c}}</td>
                <td>{{e}}</td>
                <td>{{o}}</td>
                <td>{{f}}</td>
                <td>{{l}}</td>
            </tr>
        </tbody>
    </table>
</div>